<template>
    <div class="page">

        <div class="header_fixed">
            <div class="header">
                <router-link to="/my-program" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
                <h1 class="header-title">行程</h1>
                <router-link to="/" class="header-btnRight"  ><img src="../assets/tabBar-home.png"></router-link>
                <div class="header-btnRight"></div>
            </div>
        </div><!-- <img class="rec-list-item-img" :src="/^(http|https):\/\//.test(item2.data.img) ? item2.data.img : url+item2.data.img"/>-->
        <div class="program-bg"><img  :src="/^(http|https):\/\//.test(data.trip_banner) ? data.trip_banner : url+data.trip_banner" alt=""></div>
        <div class="program-head">
            <div class="program-head-title">{{data.name}}</div>
            <div class="program-head-Across-info">
                <div class="program-head-desc"><img class="program-head-desc-img" src="../assets/my-program-days.png"><p>{{data.days}}天</p></div>
                <div class="program-head-desc"><img class="program-head-desc-img" src="../assets/my-program-people.png"><p>{{data.people}}人</p></div>
                <div class="program-head-desc"><img class="program-head-desc-img" src="../assets/my-program-city_name.png"><p>{{data.admin_name}}</p></div>
            </div>
            <div class="program-head-desc"><img class="program-head-desc-img" src="../assets/my-program-house.png"><p>{{data.city_name | delComma}}</p></div>
            <div class="program-head-desc"><img class="program-head-desc-img" src="../assets/my-program-time.png"><p>时间：{{data.time}}</p></div>
            <!--<div class="program-head-price">{{data.totalPriceData.total}}</div>-->
            <!--<div class="program-head-price">￥3200.00<span>(人均价格)</span></div>-->
            <div class="program-head-price" v-if="data.showpricedetail==1">
                <div style="display: flex;">
                    <div>价格：￥{{data.totalPriceData.total}}</div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div :class="data.isPaid ==1 ? 'pg_panel-status-isPaid': '' " >{{data.isPaid ==1 ? '已支付': ''}}</div>
                </div>
            </div>
        </div>
        <!--地图-->
        <div class="my-map-list" v-if="cityMaphasline">
            <div class="container">
                <div id="allmap" ref="allmap" class="allmap"></div>
            </div>
        </div>

        <!--行程特色-->
        <div>
            <div class="h30"  v-if="datafeature"></div>

            <div class="list"  v-if="datafeature">
                <div class="pg_panel">
                    <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 行程特色</div>
                    <div class="pg_panel-desc" v-html="replaceImg(datafeature)"></div>
                </div>
                <div class="h30"></div>
            </div>
        </div>
        <!--tab切换 行程概览 行程安排  报价说明-->
        <div>
            <!--<router-view v-if="isRouterAlive">-->
            <div class="tab-menu">
                    <div    v-for="(item,index) in tabMenu"
                            class="tab-menu-item"
                            :class="{'active' : tabCurr==index}"
                            @click="tabFun(index)"
                            :id="gernerateId(index)"
                            v-show="isRouterAlive"
                    >{{item.name}}
                    </div>
            </div>
            <!--</router-view>-->

            <div v-show="tabCurr==0"  class="person_0">
                <div class="list-warp-trip"  v-for="(item,index) in data.keyArr">
                    <div class="list-dats">{{item.day}}</div>
                    <span class="list-datatit">{{item.daytitle}}</span>
                    <div class="list-trip">
                        <a href="javascript:void(0)"   v-for="(item2,index) in item.active" @click="returnTop('#anchor-'+item2.id)">
                            <div class="list-Jump" > <!--@click="returnTop(item.id)"--> <!-- v-for="(item2,index2) in item.xiangqing"-->
                                <span class="list-trip-add" >{{item2.title}}</span> <!--:id="'#anchor-'+item2.id"-->
                                <div :class="[index== item.active.length-1 ? 'lit-trip-none' : 'list-trip-point']"></div>
                                <!-- :class="[index2== item.active.length-1? "" : '"list-trip-point']"-->
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div v-show="tabCurr==1"  class="person_1">
                <div class="list">
                    <div class="h30"></div>
                    <div class="pg_panel" id="text" ref="text">
                        <!--<div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 行程安排</div>&nbsp&nbsp&nbsp&nbsp&nbsp-->
                        <div :id="'#day-'+index" v-for="(item,index) in data.schedule">
                            <div class="pg_panel-title2">
                                <span class="line-days"></span>
                                <div>
                                    <p class="pg_panel-title2-icon"  :ref="'#day-'+index">DAY&nbsp;&nbsp;{{index+1}}</p>
                                    <p class="pg_panel-title2-iconday">{{item.time}}</p>
                                </div>
                                <span class="line-days"></span>
                            </div>  <!-- 原有得地点{{item.title | delComma}}-->

                            <!--每一天地图-->
                            <div class="my-map-list">
                                <div class="container">
                                    <div :id="'daymap'+index" ref="allmapday" class="allmapday" v-if="item.hasLine"></div>
                                </div>
                            </div>
                            <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span><p>{{item.title | delComma}}</p></div>

                            <div  v-for="(item2,index2) in item.xiangqing" class="pg_panel-content pg_panel-line" v-if="item.xiangqing">
                                <div class="pg_panel-content-title" :id="'#anchor-'+item2.name_id"><!--'#anchor-'+item2.id-->
                                    <img class="pg_panel-content-title-tags" :src="imgsty(item2.mapmark)">

                                    <div class="pg_panel-content-title-text">
                                        <div class="pg_panel-content-imgs" v-if="item2.thumb" >

                                            <img class="pg_panel-content-imgs-item" :preview="index" v-for="(item3,index) in item2.thumb"
                                                 :src="imgUrl(item3)" v-if="index==0"
                                            />
                                        </div>
                                        <div class="pg_panel-content-title-text-poiname" @click="Poidetauls(item2.poiid,item2.thumb)">
                                            <p :class="[item2.thumb !==''  ? 'pg_panel-content-title-text-des' : 'pg_panel-content-title-text-poiline']">{{changeType(item2.time)}} {{item2.title}} </p>
                                            <p class="pg_panel-content-title-text-city"><span v-if="item2.address"><img class="pg_panel-content-title-text-city-tags" src="../assets/tabBar-destination-new.png" alt="" ></span>{{item2.address | charTrim}}</p>
                                        </div>
                                        <div class="pg_panel-content-title-text-arrows" v-if="item2.thumb" @click="Poidetauls(item2.poiid,item2.thumb)">
                                            <img src="../assets/my-parshow-right.png" alt="">
                                        </div>
                                    </div>
                                   <!--原有的时间  {{changeType(item2.time)}}-->
                                   <!--<p class="active-poiname" v-if="item2.subTitle">{{item2.subTitle}}</p>-->
                                </div>
                                <!--<a class="pg_panel-content-goodsurl" v-if="item2.goodsurl" :href="item2.goodsurl">点击查看详情</a>-->
                             <!--   <div class="pg_panel-content-address" v-if="item2.address" @click="goMap(item2.title,item2.address,item2.lat,item2.lng)">
                                    <span><img class="pg_panel-content-address-tags" src="../assets/tabBar-destination-new.png" alt="" ></span>
                                    <span>{{item2.address | charTrim}}</span>
                                </div>-->
                              <!--  <div class="pg_panel-content-imgs" v-if="item2.thumb" >

                                    <img class="pg_panel-content-imgs-item" :preview="index" v-for="(item3,index) in item2.thumb"
                                         :src="imgUrl(item3)" v-if="index==0"
                                    />
                                </div>-->
                                <!--内容描述-->
                                <!--<div v-if="(item2.show && item2.poi_content) || !item2.poiid" class="pg_panel-content-desc" v-html="replaceImg(item2.poi_content)"></div>-->
                               <!-- <span v-if=" item2.poiid &&item2.poi_content " @click="showContent(index,index2)" class="pg_panel-content-more_btn">
                                     <img class="pg_panel-content-more_btn-icon" :class="{'router' : item2.show }" src="../assets/text_arr.png">
                                </span>-->
                                <div  class="pg_panel-content-desc" v-if="item2.content" v-html="replaceImg(item2.content)" ></div>
                            </div>
                        </div>
                        <div class="pg_panel-title3">以上行程安排仅供参考，具体安排根据当天实际情况进行调整</div>

                        <div class="nav fixbottom fixed" id="nav-container" ref="navcontainer">
                            <ul class="nav-box" :class="data.admin_confirm == 0 ||  data.isPaid ==1  ?'nav-all' : 'nav-half'"  id="nav-box" ref="navbox">
                                <li  v-for="(item,index) in data.schedule" @click="returndown('#day-'+index)">D{{index+1}}</li>
                            </ul>
                            <div class="Costbox" v-if="data.isConfirm==0 && data.admin_confirm > 0">
                                <div class="Costbox-btn" @click="submitorder(data.isConfirm,data.isPaid,data.trip_id)">确认行程</div>
                            </div>
                            <div class="Costbox" v-else-if="data.admin_confirm > 0 && data.isPaid < 1 " >
                                <div class="Costbox-btn" @click="submitorder(data.isConfirm,data.isPaid,data.trip_id)">{{data.isPaid ==1 ? '已支付': '待支付'}}</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div v-show="tabCurr==2"  class="person_2">
                <div class="list">
                    <!--<div class="h30" v-if="data.careful"></div>-->
                    <!-- <div class="pg_panel" v-if="data.careful">
                         <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 费用包含</div>
                         &lt;!&ndash;<div class="pg_panel-desc" v-html="replaceImg(data.careful)"></div>&ndash;&gt;&lt;!&ndash;费用总计&ndash;&gt;
                     </div>-->
                    <!--报价明细-->
                    <div class="quote-details" v-if="data.showpricedetail==1">
                        <div class="h30" v-if=""></div>
                        <div class="pg_panel"  >
                            <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 报价明细</div>
                            <div class="AirTicket"><p>总价：<span>￥{{data.totalPriceData.total}}</span></p></div>
                            <div class="AirTicketList" v-for="(item,index) in data.totalPriceData.detail">
                                <div class="AirTicketList-item">
                                    <img class=""  :src="imgty(item.title)" alt=""  v-if="">
                                    <span class="AirTicketList-item-tyname">{{item.title}}</span><div class="AirTicketList-item-pric">￥{{item.total}}</div></div>
                                <div class="AirTicketList-mesname"  v-for="(item2,index) in item.detail">
                                    <div class="AirTicketList-mesname-info">{{item2.title}}</div>
                                    <div class="AirTicketList-mesname-day">{{item2.remark}}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--<div class="h30" v-if="dataprice"></div>-->
                    <div class="pg_panel" v-if="data.showprice && dataprice">
                        <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 费用包含</div>
                        <div class="pg_panel-desc" v-html="replaceImg(dataprice)"></div>
                    </div>
                    <!--<div class="h30" v-if="datapriceno"></div>-->
                    <div class="pg_panel" v-if="data.showprice &&datapriceno">
                        <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 费用不含</div>
                        <div class="pg_panel-desc" v-html="replaceImg(datapriceno)"></div>
                    </div>
                    <!--  <div class="h30" v-if="data.back"></div>
                      <div class="pg_panel" v-if="data.back">
                          <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 退改规则</div>
                          <div class="pg_panel-desc" v-html="replaceImg(data.back)"></div>
                      </div>-->

                    <!--<div class="h30" v-if="data.back"></div>-->
                    <div class="pg_panel" v-if="data.showback && data.back">
                        <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 退改规则</div>
                        <div class="pg_panel-desc" v-html="replaceImg(data.back)"></div>
                    </div>
                    <!--<div class="h30" v-if="data.back"></div>-->
                    <div class="pg_panel" v-if="data.back && data.showcareful">
                        <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 注意事项</div>
                        <div class="pg_panel-desc" v-html="replaceImg(data.careful)"></div>
                    </div>
                    <div class="" v-if=''>
                        <div class=""><span class=""> </span> </div>
                        <div class="" v-html=""></div>
                    </div>
                </div>
            </div>
            <div v-show="tabCurr==3"  class="person_3" v-if="data.hasExtra">
                <div class="list">
                    <div class="h30"></div>
                    <div class="pg_panel">
                        <!--<div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 行程安排</div>&nbsp&nbsp&nbsp&nbsp&nbsp-->
                        <div :id="'#day-'+index" v-for="(item,index) in data.schedule">
                         <!--   <div class="pg_panel-title2">
                                <span class="line-days"></span>
                                <div>
                                    <p class="pg_panel-title2-icon"  :ref="'#day-'+index">DAY&nbsp;&nbsp;{{index+1}}</p>
                                    <p class="pg_panel-title2-iconday">{{item.time}}</p>
                                </div>
                                <span class="line-days"></span>
                            </div> --> <!-- 原有得地点{{item.title | delComma}}-->
                            <!--屏幕滚动切换tabnav-->
                            <div class="pg_panel-title" v-if="item.hasExtra"><span class="pg_panel-title-icon"> </span><p>{{item.title | delComma}}</p></div>
                            <div  v-for="(item2,index2) in item.xiangqing" class="pg_panel-content pg_panel-line" v-if="item2.activeType >10">
                                <div class="pg_panel-content-title" :id="'#anchor-'+item2.name_id"><!--'#anchor-'+item2.id-->
                                    <img class="pg_panel-content-title-tags" :src="imgsty(item2.mapmark)">

                                    <div class="pg_panel-content-title-text">
                                        <div class="pg_panel-content-imgs" v-if="item2.thumb" >

                                            <img class="pg_panel-content-imgs-item" :preview="index" v-for="(item3,index) in item2.thumb"
                                                 :src="imgUrl(item3)" v-if="index==0"
                                            />
                                        </div>
                                        <div class="pg_panel-content-title-text-poiname" @click="Poidetauls(item2.poiid,item2.thumb)">
                                            <p :class="[item2.thumb !==''  ? 'pg_panel-content-title-text-des' : 'pg_panel-content-title-text-poiline']">{{changeType(item2.time)}} {{item2.title}} </p>
                                            <p class="pg_panel-content-title-text-city"><span v-if="item2.address"><img class="pg_panel-content-title-text-city-tags" src="../assets/tabBar-destination-new.png" alt="" ></span>{{item2.address | charTrim}}</p>
                                        </div>
                                        <!--<div class="pg_panel-content-title-text-arrows" v-if="item2.thumb">-->
                                            <!--&gt;-->
                                        <!--</div>-->
                                    </div>
                                    <!--原有的时间  {{changeType(item2.time)}}-->
                                    <!--<p class="active-poiname" v-if="item2.subTitle">{{item2.subTitle}}</p>-->
                                </div>
                                <!--<a class="pg_panel-content-goodsurl" v-if="item2.goodsurl" :href="item2.goodsurl">点击查看详情</a>-->
                                <!--   <div class="pg_panel-content-address" v-if="item2.address" @click="goMap(item2.title,item2.address,item2.lat,item2.lng)">
                                       <span><img class="pg_panel-content-address-tags" src="../assets/tabBar-destination-new.png" alt="" ></span>
                                       <span>{{item2.address | charTrim}}</span>
                                   </div>-->
                                <!--  <div class="pg_panel-content-imgs" v-if="item2.thumb" >

                                      <img class="pg_panel-content-imgs-item" :preview="index" v-for="(item3,index) in item2.thumb"
                                           :src="imgUrl(item3)" v-if="index==0"
                                      />
                                  </div>-->

                                <!--内容描述-->
                                <div v-if="(item2.show && item2.poi_content) || !item2.poiid" class="pg_panel-content-desc" v-html="replaceImg(item2.poi_content)"></div>
                                <!-- <span v-if=" item2.poiid &&item2.poi_content " @click="showContent(index,index2)" class="pg_panel-content-more_btn">
                                      <img class="pg_panel-content-more_btn-icon" :class="{'router' : item2.show }" src="../assets/text_arr.png">
                                 </span>-->
                                <div  class="pg_panel-content-desc" v-html="replaceImg(item2.content)"></div>
                            </div>
                        </div>
                        <div class="pg_panel-title3">以上行程安排仅供参考，具体安排根据当天实际情况进行调整</div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部上身页面返回得poi景点详情信息-->
        <mt-popup  v-model="popupVisible"  position="bottom" >
            <div class="poi-details" v-for="">
                <div class="poi-details-hea">
                    <div class="poi-details-hea-poiname">{{datapoi.name}}</div><span  class="poi-details-hea-close" @click="PoidetsClose">X</span>
                </div>
                <div class="poi-details-content">
                    <div class="poi-details-content-imgs">
                        <mt-swipe :auto="2000">
                            <mt-swipe-item v-for="item in datapoi.thumb" :key="item.id">
                                <!--<a :href="item.href">-->
                                    <img :src="item" class="img"/>
                                    <span class="desc"></span>
                                <!--</a>-->
                            </mt-swipe-item>
                        </mt-swipe>
                    </div>
                    <div class="poi-details-content-des">
                        <a :href="'https://www.google.com/maps/search/'+ datapoi.address"><p v-if="datapoi.address"><img src="../assets/poidetails-addres-icon.png" alt="" class="poi-details-content-des-address">{{datapoi.address}}</p></a>
                        <p v-if="datapoi.ticket"><img src="../assets/poidetails-menpiao-icon.png" alt="" class="poi-details-content-des-ticket">{{datapoi.ticket}}</p>
                        <p v-if="datapoi.open_time"><img src="../assets/poidetails-time-icon.png" alt="" class="poi-details-content-des-open_time">{{datapoi.open_time}}</p>
                    </div>
                    <div class="poi-details-content-brief" v-html="datapoi.introduce">
                        <!--{{datapoi.introduce}}-->
                    </div>
                </div>
            </div>
        </mt-popup>
        <!--下方客服信息-->
        <div class="h30"></div>
        <div class="pg_panel">
            <div class="pg_panel-title"><span class="pg_panel-title-icon"> </span> 联系方式</div>
            <div class="pg_panel-desc">
                <div>国内客服: +86 400-100-5295</div>
                <div>北美客服: +1 888-828-0899</div>
                <div>联系我们: support@kuaibangxing.com</div>
                <div>官网：http://www.kuaibangxing.com</div>
                <img class="pg_panel-desc-chapter" src="../assets/chapter.png">
                <div style="text-align: center;padding-top: 30px"><img class="pg_panel-desc-ewm" :src="data.wx_qrcode"></div>
            </div>
        </div>

    </div>
</template>
<!--goole地图js-->
<!--<script src="https://www.google.cn/maps/api/js?language=en&key=AIzaSyBICWcSC4Iosl2raNVBEw7Qt3FmD28d8xE"></script>-->
<script type="text/ecmascript-6">
    import { Toast,MessageBox,Swipe, SwipeItem} from 'mint-ui';
    import storage from "../store/localstorage"
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import wxLocation from "../store/wxLocation"
    import { MapElement } from 'vue-googlemaps'
    import 'mint-ui/lib/style.css'
    import {gmapApi} from 'vue2-google-maps'
    export default {
        name: "My-income-auth",
        components: {
            'mt-swipe': Swipe,
            'mt-swipe-item': SwipeItem
        },
        data() {
//            this.$router.replace({
//                path:'628'
//            })
            return {
                url:config.url,
                trip_id:'',
                data:'',//返回所有数据
                datafeature:'',//返回行程特色
                dataprice:'', //费用
                datapriceno:'',//费用不含
                tabCurr: 1,
                tabMenu: [{name: '行程概览'}, {name: '行程安排'},{name: '费用说明'},{name:'周边'}],
                triparr:'',
                popupVisible:false,
                datapoi:'',
                analysisRank:[],
                mapData:[],
                isRouterAlive:true,
                cityMaphasline:false,
            }
        },
        computed: {
            google: gmapApi
        },
        filters:{
            delComma(value){
                if(value==undefined) return;
                var char=value;
                if(char.indexOf(',')==0){
                    char=char.substr(1,char.length)
                }
                if(char.lastIndexOf(',')==char.length-1){
                    char=char.substr(0,char.length-1)
                }
                return char
            },
            charTrim(value){
                return  value.trim()
            }
        },
        methods: {
            reload(){
               this.$router.go(0)
            },
            changeType(str){
                return str==0? "":str;
            },
            gernerateId: function (index){

                return "person_" +index

            },
            tabFun(val) {     //tab切换
                this.tabCurr = val;
                //切换tab 行程安排调起底部导航
                if(this.tabCurr==1){
//                    location.reload()
//                    this.navTab();
                }

                //
            },
            returnTop(selector){
                var that=this;
                that.tabCurr = 1;//下边tab切换
                setTimeout(()=>{
                    var anchor = document.getElementById(selector);
                    if(anchor) { anchor.scrollIntoView(); }
//                    that.navTab();
                },0)
            },
            /*每一天瞄点方法*/
            returndown(selector){
//                console.log(selector)
                var that=this;
                that.tabCurr = 1;//下边tab切换
                setTimeout(()=>{
                    var anchor = document.getElementById(selector);
                    if(anchor) { anchor.scrollIntoView(); }
                    that.navTab();
                },0)
            },
            getData(){
                this.axios.post('waptripindex',{trip_id:this.trip_id})
                        .then((res)=>{

                    this.data=res.data;
//                    console.log(this.data)
                    this.datafeature=res.data.introduction.replace( /\r\n/g,"<br>");
                    this.dataprice=res.data.price.replace( /\r\n/g,"<br>");
                    this.datapriceno=res.data.priceno.replace( /\r\n/g,"<br>");
//                       console.log(this.datafeature)
//                        console.log(this.datafeature)
                    this.share();
                    this.mapData=res.data.cityMap.ways_city
                    this.cityMaphasline=res.data.cityMap.hasLine
                    //判断周边是否引隐藏
                    if(res.data.hasExtra==false){
//                        console.log('周边tab隐藏')
                        document.getElementById("person_3").style.display='none';
                    }
                })
            .catch((err)=>console.log(err))
            },
            // 地图
            goMap(title,address,lat,lng){
                //this.$router.push({path:'/my-map',query:{id:this.trip_id,lat:lat,lng:lng}})
                wxLocation({
                    title,
                    address,
                    lat,
                    lng
                })
            },
            //详情切换
            showContent(idx1,idx2){
                this.data.schedule[idx1].xiangqing[idx2].show=!this.data.schedule[idx1].xiangqing[idx2].show
            },
            imgUrl(url){
                var reg=/^(http|https):\/\//;
                if(!reg.test(url)){
                    url=this.url+url
                }
                return url
            },
            imgsty(val){
//                console.log(val)
                if(val=="起点") {
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/70979ab7ea1d01a9b46a6c55258786edpng'
                }
                if(val=="途经"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/14ad708be2abb7ed2d9791d356f36e55png'
                }
                if(val=="终点"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/837b23e8495cccddbe8aa1922ccde970png'
                }
                if(val==""){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/837b23e8495cccddbe8aa1922ccde970png'
                }
            },
            imgty(val){
//                console.log(val,"乐星")
                if(val=="机票") {
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/9052a3a9dc8de2bda8ff7d4f5d782d9apng'
                }
                if(val=="酒店"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/c229569fd3ff8658e27e66f50cf2c5c4png'
                }
                if(val=="门票"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/08b15aafeb1241d2a74afd624d61e7e3png'
                }
                if(val=="保险"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/9a2481088edbbe69d9eb553e7b92ac07png'
                }
                if(val=="附加"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/117ff5fc50c03f7081e69c4d389d0eedpng'
                }
                if(val=="用车"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/7c48d6d7b4892c1f784bd3676b8d73d0png'
                }
                if(val=="租车"){
                    return 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/117ff5fc50c03f7081e69c4d389d0eedpng'
                }
            },
            // 替换图片路径
            replaceImg(data){
                if(data){
                    data=this.formatImg(data);
                    data=data.replace( /<style(([\s\S])*?)<\/style>/gi,'');
                    //data=data.replace( /style="(([\s\S])*?)"/gi,'');
                    //data=data.replace( /width="(([\s\S])*?)"/gi,'width="100%"');
                    //data=data.replace( /height="(([\s\S])*?)"/gi,'height="auto"');
                    data=data.replace( /\/ueditor\//g,this.url+'/ueditor/');
                    return data.replace( /<img/ig,'<img preview="99" ');
                }

            },
            formatImg(html) {
                //console.log(html)
                var newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
                    var match = match.replace(/style=\"(.*)\"/gi, '');
                    return match;
                });
                return newContent;
            },
            share() {
                wxShare({
                    title: '快帮行-行程定制', // 分享标题
                    desc: this.data.name, // 分享描述
                    debug: false
                }, function () {
                    console.log('分享成功')
                });
            },
            /*随滚动条滚动切换tab*/
            navTab(){
                //tabcurr==1
                if(this.tabCurr==1 ){
                    var navContainer = this.$refs.navcontainer
                    var navBox = this.$refs.navbox
                    var text = this.$refs.text
                    var navBoxChild = navBox.children;
                    var textChild = text.children;
                    var num = navContainer.offsetTop;
                    var a = navContainer.offsetHeight;
                    window.onscroll = function(){
                        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
//                        console.log(num,a,scrollTop,"num a scrollTop")
                        if(scrollTop >= num){
                            navContainer.className = "nav fixed";
                            text.style.paddingTop = a +"px";
                        }
                        /*else{
                         navContainer.className = "nav fixed";
                         text.style.paddingTop = "";
                         }*/
                        //当导航与相应文档接触的时候自动切换
                        //method1
                        /*  if(scrollTop==undefined1){
                         console.log('打印00')
                         }*/
                        /*+200*/
                        var Atop=scrollTop
                        for(var i=0;i<navBoxChild.length;i++){
                            if( Atop+a >= textChild[i].offsetTop){
//                                     console.log(scrollTop,Atop,textChild[i].offsetTop,'每一个textChild')
                                for(var j=0;j<navBoxChild.length;j++){
                                    navBoxChild[j].className = "";
                                }
                                navBoxChild[i].className = "cur";
                            }
                        }
                    };
                    for(var i=0;i<navBoxChild.length;i++){
                        var interval;
                        navBoxChild[i].index = i;
                        navBoxChild[i].onclick = function(){
                            var self = this;
                            clearInterval(interval);
                            interval = setInterval(function(){
                                if(document.body.scrollTop>0){
                                    if(document.body.scrollTop + a<=textChild[self.index].offsetTop){
                                        document.body.scrollTop += 40;
                                        if(document.body.scrollTop + a>=textChild[self.index].offsetTop){
                                            document.body.scrollTop = textChild[self.index].offsetTop-a;
                                            clearInterval(interval);
                                        }
                                    }else{
                                        document.body.scrollTop /= 1.1;
                                        if(document.body.scrollTop + a<=textChild[self.index].offsetTop){
                                            document.body.scrollTop = textChild[self.index].offsetTop-a;
                                            clearInterval(interval);
                                        }
                                    }
                                }else{
                                    return false
                                }

                            },40);
                        };
                    }

//                    console.log(this.tabCurr)
                    this.$nextTick(() => {
//
                    })
                }else{
                    window.removeEventListener("scroll",this.navTab)
//                    console.log('天数不大于3天')
                    document.getElementById("nav-container").style.display='none';
                }
            },
            /*手动滑动nav*/
            handnav(){
                var timer = null,
                        parentElement = document.querySelector(".nav-box"),
                        childElement = document.querySelectorAll("li");
                for (var i = 0, len = childElement.length; i < len; i++) {
                    childElement[i].index = i;
                    childElement[i].onclick = function() {
                        var offsetLeft = childElement[this.index].offsetLeft,
                                scrollX = parentElement.scrollLeft,
                                clientX = parentElement.clientWidth,
                                childClientX = childElement[this.index].clientWidth;
                        var speed = offsetLeft - scrollX + childClientX / 2 - clientX / 2,
                                s = speed / 40,
                                totalX = speed + scrollX;
                        timer = setInterval(function() {
                            parentElement.scrollLeft += s;
                            if (
                                    parentElement.scrollLeft <= 0 ||
                                    parentElement.scrollLeft >= parentElement.scrollWidth - clientX ||
                                    (speed > 0 && parentElement.scrollLeft > totalX) ||
                                    (speed < 0 && parentElement.scrollLeft < totalX)
                            ) {
                                clearInterval(timer);
                            }
                        }, 10);
                    };
                }
            },
            Poidetauls(id,thumb){  //请求poi详情 item2.thumb
//                console.log(thumb)
                if(thumb !==''&& thumb !==undefined){
                    this.axios.post('waptrippoi ',{id:id})
                            .then((res)=>{
                        this.popupVisible=true
                        this.datapoi=res.data
//                        console.log(this.datapoi)
                    })
                .catch((err)=>console.log(err))
                }

            },
            PoidetsClose(){
                this.popupVisible=false
            },
            //总地图

            //地图方法
            displayRoute(origin, destination, ways_poi,service, display,map_name){
//                console.log(origin, destination, ways_poi, service, display, map_name)
                service.route({
                    origin: origin,
                    destination: destination,
                    waypoints: ways_poi,
                    travelMode: 'DRIVING',
                    provideRouteAlternatives: true,
                    avoidTolls: false
                }, function (response, status) {
                    if (status === 'OK') {
                        display.setDirections(response);
                    } else {
                        document.getElementById(map_name).style.display='none';
                        console.log('地图绘制失败')
                    }
                });
            },
            computeTotalDistance(result){
                var total = 0;
                var myroute = result.routes[0];
                for (var i = 0; i < myroute.legs.length; i++) {
                    total += myroute.legs[i].distance.value;
                }
                total = total / 1000;
//                console.log(total)
                //document.getElementById('total').innerHTML = total + ' km';
            },
           //封装地图经纬度
           initMap(map_name,start_poi,end_poi,ways_poi) {
                //格式化
                var s_poi = {'lat':parseFloat(start_poi.lat),'lng':parseFloat(start_poi.lng)};
                var e_poi = {'lat':parseFloat(end_poi.lat),'lng':parseFloat(end_poi.lng)};
                var w_poi = [];
                if(ways_poi.length>0){
                    for(var i=0;i<ways_poi.length;i++){
                        if(ways_poi[i].lat!='' && ways_poi[i].lat!=null && ways_poi[i].lat!='0'&& ways_poi[i].lat!=undefined && ways_poi[i].lng!='' && ways_poi[i].lng!=null && ways_poi[i].lng!='0' && ways_poi[i].lng!=undefined){
                            w_poi.push({location:{'lat':parseFloat(ways_poi[i].lat),"lng":parseFloat(ways_poi[i].lng)}});
                        }
                    }
                }

                var map = new google.maps.Map(document.getElementById(map_name), {
                    zoom: 8,
                    center: {lat: 39.316568, lng: -101.503765}  // 美国
                });

                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer({
                    draggable: false,
//                    suppressMarkers:true,
                    map: map
                });

                directionsDisplay.addListener('directions_changed', function() {
                    //_that.computeTotalDistance(directionsDisplay.getDirections());
                });
                this.displayRoute(s_poi, e_poi, w_poi,directionsService,
                        directionsDisplay,map_name);
            },
            //确认行程 或  支付进行支付
            submitorder(isConfirm,isPaid,trip_id){
                let self=this
                console.log(isConfirm,isPaid,trip_id)
                if(isConfirm==0){ //待确认行程
                    let  params={
                        id:trip_id
                    }

                    self.axios.postAll('/wap/trip/confirmTrip', params,true)
                        .then(res => {
                            console.log(res.data)
                            if(res.data.code==200){
                                //保存分享用得图片
                                console.log(res.data.msg)
                                Toast({
                                    message: '您已成功确认',
                                    position: 'bottom',
                                    duration: 5000
                                });
                             self.Getorder(trip_id)
                            }
                        }).catch(err => {
                        console.log(err)
                    });
                }else if (isConfirm==1 && isPaid==0) { //已确认行程  待支付
                    self.Getorder(trip_id)
                }else if (isConfirm==1 && isPaid==1){//已确认行程  已支付
                    Toast({
                        message: '您的定制行程已支付',
                        position: 'bottom',
                        duration: 5000
                    });
                }
            },
            Getorder(trip_id){
                var self=this
                self.$router.push({  //
                    path:'/MyProgramShowOrder',   //跳转的路径
                    query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                        id:trip_id ,
                    }
                })
            }

        },
        mounted(){
//            this.mapData = [{ latitude: 39.7343972602, longitude: -105.0777030980 }];
            window.scrollTo(0,0);
            this.trip_id=this.$route.params.id;
            this.getData();

            var _that = this;
            if(this.tabCurr==1){
                this.navTab();
            }
            this.handnav()  //手动滑动导航
            setTimeout(function(){
                var cityMapData = _that.data.cityMap;
                if(cityMapData.start_city.lat!=0&&cityMapData.end_city.lat!=0){
                    if(_that.cityMaphasline){
                        _that.initMap('allmap',cityMapData.start_city,cityMapData.end_city,cityMapData.ways_city);  //总地图
                    }
                }else{
                    document.getElementById('allmap').style.display = 'none';
                }
                if(_that.data.show_day_map==1){
                    for(var i=0;i<_that.data.schedule.length;i++){
                        var dayMapData = _that.data.schedule[i];
//                        console.log(dayMapData.ways_poi)
                        if(dayMapData.start_poi.length>0 && dayMapData.end_poi.length>0){
                            _that.initMap('daymap'+i,dayMapData.start_poi[0],dayMapData.end_poi[0],dayMapData.ways_poi);  //每日地图
                        }else{
                            if(dayMapData.hasLine){
                                document.getElementById('daymap'+i).style.display = 'none';
                            }
                        }
                    }
                }

            },1500)
        },

        updated(){
            this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";
    .h30 {
        height: rpx(10);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }
    .page{
        background: $color0;
        min-height: 100%;
    }
    .header_fixed{
        position: fixed;
        top: 0;
        left:0;
        right: 0;
        z-index: 1499;
        height: rpx(124);
    }
    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        border-bottom: 1px solid $color2;
    &-btnLeft{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(32);
        height: rpx(32);
    }
    }
    &-btnRight{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(42);
        height: rpx(42);
    }
    }
    // &-btnRight:after{
        //     display: block;
        //     content: ' ';
        //     width: rpx(64);
        //     height: rpx(64);
        // }
    &-title{
         flex: 1;
         font-size: rpx(36);
         text-align: center;
         font-weight: normal;
     }

    }
    .active-poiname{
        color: rgb(102,102,102);
        font-size: rpx(24);
        padding: rpx(5) 0;
    }
    .program-bg{
        height: rpx(464);
        width: 100%;
    >img{
         width: 100%;
         height: rpx(464);
     }
    }
    .program{
    &-head{
         padding: rpx(30) rpx(71) rpx(24) rpx(30);
    &-title{
         /*padding: rpx(30) 0;*/
         font-size: rpx(36);
         font-weight: bold;
         line-height: 160%;
     }
    &-Across-info{
         display: flex;
     }
    &-desc{
         /* display: flex;
          align-items: center;
          padding: rpx(20);*/
         display: flex;
         padding: rpx(30) rpx(24) rpx(5) 0;
         font-size: rpx(22);
         line-height: 130%;
         color: #fc5c2a;
    &-img{
         margin-right: rpx(10);
         width: rpx(32);
         height: rpx(32);
         vertical-align: middle;
     }
    }
    &-price{
         padding: rpx(20) rpx(10) rpx(10) rpx(10);
         font-size: rpx(30);
         color:#fc5c2a;
         font-weight: bold;
         line-height:rpx(40);
        /*text-align: right;*/
    >span  {
         padding-left: rpx(30);
         font-size: rpx(26);
         color:rgb(102,102,102);
     }
    }

    }
    }
    /*行程概览*/
    .list-warp-trip{
        /*display: flex;*/
        padding: rpx(15) rpx(31) rpx(15) rpx(40);
    }
    .list-dats{
        /*width: rpx(200);*/
        font-size: rpx(36);
        color: #333333;
        line-height: rpx(70);
        display: inline-block;
        font-weight: bold;
    }
    .list-trip{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        font-size: rpx(28);
        color:rgb(102,102,102);
    >div{
         margin-bottom: rpx(20);
     }
    &-add{
         border:1px solid #999999;
         box-sizing: border-box;
         padding:rpx(10) rpx(10);
         line-height: rpx(55);
         margin-right: rpx(20);
        border-radius: rpx(10);
        color: #666666;
     }
    &-point{
         display: inline-block;
         width: 0;
         height: 0;
         overflow: hidden;
         border-width: 5px;
         border-color: transparent transparent transparent #999999 ;
         border-style:solid dashed dashed dashed;
     }
    &-none{
        display: none;
     }
    }
    /*tab切换*/
    .ticket{
    &-bar{
         width: 100%;
     }
    &-list{
         margin:rpx(30);
    &-item{
         display: flex;
         align-items: center;
         margin-bottom: rpx(20);
         padding: rpx(40) 0;
         background:$color0;
         border-radius: rpx(10);
    &-price{
         width: rpx(180);
         text-align: center;
         color: $color3;
    .num{
        font-size: rpx(62);
    }
    }
    &-info{
         flex: 1;
    &-title{
         padding-bottom: rpx(10);
         font-size: rpx(32);
         font-weight: normal;
     }
    &-desc{
         color:$color5;
     }
    }
    &-opt{
         margin-right: rpx(20);
         text-align: right;
    .btn{
        display: block;
        width: rpx(140);
        height: rpx(60);
        line-height: rpx(60);
        background: $color5;
        border-radius: $radius6;
        color: $color0;
        font-size: rpx(28);
        text-align: center;
    }
    .active{
        background: $color7;
    }
    .success{
        background: $bgcolor1;
        color: #999;
    }
    }
    }
    }
    }
    .tab {
        background: $color0;
    &-menu {
         display: flex;
     }
    &-menu-item {
         flex: 1;
         padding: rpx(30) rpx(20);
         text-align: center;
         color: $color5;
         font-size: rpx(32);
         border-bottom: solid $color2 rpx(4);

    &.active {
         color: $color3;
         border-bottom: solid $color3 rpx(4);
     }
    }
    }
    .list-datatit{
        color: #333333;
        font-size: rpx(36);
        font-weight: bold;
        line-height: rpx(70);
    }
    /*新的行程特色*/
    .person_0{
        padding: rpx(30) rpx(20);
    }
</style>
<style lang="scss">
    @import "../assets/base";
    //产品介绍
    .line-days{
        width: rpx(150);
        height: rpx(2);
        background: rgb(221,221,221);
    }
    .pg_panel-status{
        width: 100%;
        /*height: 30px;*/
        text-align: right;
        margin: 10px 0;
        display: inline-block;
        &-isPaid{
            background: green;
            color: #fff;
            padding: 0px 4px;
            margin: 2px 0;
            font-size: 10px;
            height: 15px;
            line-height: 15px;
        }
        &-Confirm{
            background: #ff7d00;
            color: #fff;
            padding: 5px;
        }
    }
    .pg_panel {
        color: rgb(252,92,42);
        padding:  rpx(30);
        position: relative;
    &-title{
         padding: 0 0 rpx(30);
         font-size: rpx(34);
         font-weight: bold;
         display: flex;
         align-items: center;
    &-icon {
         display: inline-block;
         margin-right: rpx(20);
         width: rpx(8);
         height: rpx(40);
         border-radius: rpx(10);
         background: $color3;
     }
     p{
         color: #333333;
         font-size: rpx(34);
         line-height: rpx(40);
     }
    }
    &-title2{
         display: flex;
         padding: rpx(30) rpx(10) ;
         /*border-bottom: 1px solid $color2;*/
         line-height: rpx(55);
         font-size: rpx(36);
         color: #333;
         font-weight: bold;
         justify-content: center;
         align-items: center;
    &-icon{
           font-size: rpx(40);
           margin: 0 rpx(30);
           color: #333333;
       }
    &-iconday{
         font-size: rpx(24);
         margin: 0 rpx(30);
         color: #333333;
     }
    }
    &-title3{

         padding: rpx(60) 0;
         font-size: rpx(24);
         color: $color5;

     }
    &-desc {
         font-size: rpx(30);
         line-height: 160%;
         word-break: break-all;
         height: auto;
         overflow: hidden;
         color: #666;
         margin-bottom:rpx(50);
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    p{
        /*margin-bottom: rpx(20);*/
        font-size:rpx(26);
        color:rgb(51,51,51);
        line-height:190%;
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    }
    &-chapter{
         position: absolute;
         right: rpx(40);
         top: rpx(40);
         opacity:0.35;
         width: rpx(300);
         height: rpx(300);
     }
    &-ewm{
         margin: auto;
         width: rpx(200) !important;
         height: rpx(200) !important;
         text-align: center;
     }
    }
    &-content {
         font-size: rpx(26);
         line-height: 160%;
         word-break: break-all;
         height: auto;
         color: #666;
    &-title{
         position: relative;
         padding: rpx(10) rpx(15)  rpx(10)  rpx(15);
         clear: both;
         font-size: rpx(30);
         font-weight: bold;
         color: $color1;
         background:#fafafa;
         border-radius:rpx(4);
         &-text{
           display: flex;
           &-poiname{
              width: 100%;
              overflow-x: hidden;
              line-height: rpx(30);
              /*margin-left: rpx(8);*/
              /*padding: rpx(20) rpx(0) rpx(0) rpx(8);*/
              /*position: relative;*/
            }
            &-poiline{
                 padding: rpx(20) rpx(0);
                 border-bottom: rpx(1px) solid #CCCCCC;
                 /*padding-bottom: rpx(10);*/
             }
           &-arrows{
              margin: auto;
              color: #CCCCCC;
           }
           &-city{
             padding: rpx(5) rpx(0);
             font-size:rpx(24);
             color: #333333;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             position:relative;
            &-addres{
                /*position: absolute;*/
                /*bottom:0;*/
            }
            &-tags{
                 width: rpx(20);
                 height: rpx(25);
                 margin-right: rpx(4);
             }
            }
           &-des{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: rpx(10) rpx(10) rpx(40) rpx(0);
            }
          }
    &-tags{
         position: absolute;
         left:rpx(-46);
         top: 3%;
         width: rpx(32);
         height: rpx(32);
     }
    }
    &-goodsurl{
         color: #2B65C7;
         text-decoration: underline;
         display: inline-block;
         padding: rpx(10) 0;
     }
    &-address{
         display: flex;
         /*align-items: center;*/
         padding: rpx(10) 0;
         clear: both;
         color: $color1;
         cursor: pointer;
    >span{
         padding: rpx(4) rpx(10) rpx(5) 0;
     }
    }
    &-imgs{
         width:rpx(200);
         margin-right: rpx(20);
    &-item{
         /*max-width: 100%;*/
         width: rpx(200);
         height: rpx(130);
         /*margin-bottom: rpx(20);*/

     }
    }
    &-desc {
         font-size: rpx(30);
         line-height: 160%;
         word-break: break-all;
         height: auto;
         overflow: hidden;
         color: #666;
         background:#fafafa;
         border-radius:rpx(4);
         padding:rpx(0) rpx(10) rpx(10) rpx(15);
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    p{
        /*margin-bottom: rpx(5);*/
        font-size: rpx(26);
        color: #333333;
    }
    }
    &-more_btn{
         margin:rpx(10) auto;
         display: block;
         cursor: pointer;
         width: rpx(32);
         height: rpx(32);
     //line-height: rpx(60);
     //font-size: rpx(24);
    &-icon{
         width: rpx(32);
         height:rpx(32);
         transition: all .5s;
     }
    .router{
        transform: rotate(180deg);
        transform-origin: center;
    }
    }

    }
    &-line{
         margin-left: rpx(16);
         position: relative;
         padding-left: rpx(30);
         padding-bottom: rpx(30);
         /*border-left: 2px solid $color2 ;*/
         /*background: #f0f0f0;*/
         /*margin-bottom: rpx(30);*/
     }
    }
    .list-Jump{
        padding: 0 rpx(0) rpx(10) 0;
        line-height: rpx(70);
    }
    /*底部nav*/
    .nav{
        height:rpx(80);
        width:100%;
        background:#fff;
        line-height: rpx(80);
        font-size: rpx(22);
    }
    .nav .cur{
        background:#fe5722;
        border-top:2px solid #fe5722;
        color:#FFF;
    }
    .fixed{
        position:fixed;
        bottom:0;
        left:0;
        z-index: 5;
    }
    a{
        color:#505050;
    }
    .Costbox{
        display: inline-block;
        /*margin: 0  0 0 10px;*/
        width: 35%;
        height: 40px;
        line-height: 40px;
        &-btn{
            margin: 5px auto;
            height: 30px;
            width: 80%;
            background: #ff7d00;
            color: #fff;
            /*padding: 2px 10px;*/
            border-radius: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
        }
    }
    #nav-container{
        display: flex;
    }
    .nav-box {

        height: rpx(80);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
    .nav-half{
        width: 65%;
    }
    .nav-all {
        width: 100%;
    }
    .nav-box li {
        width: rpx(120);
        height: rpx(80);
        display: inline-block;
        cursor: pointer;
        color: #333;
        font-size: rpx(40);
        text-align: center;
        line-height: rpx(80);
        /*float: left;*/
    }
    .nav-box li:not(:first-child) {
        /*margin-left: 25px;*/
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    /*费用说明*/
    .AirTicket{
        padding:rpx(10) rpx(20);
        p{
            text-align: right;
            font-size: rpx(28);
            font-weight: bold;
            span{
                font-weight:bold;
                font-size: rpx(34);
            }
        }

    }
    .AirTicketList{
        background: #fafafa;
        padding:rpx(15) rpx(21);
        margin:rpx(20) 0;
        &-item{
           border-bottom: 1px solid #999;
           padding-bottom: rpx(10);
           height:rpx(58);
           img{
               width: rpx(26);
               height: rpx(26);
               margin-right: rpx(11);
           }
           &-tyname{
             font-size: rpx(30);
             color: #333333;
             fontFamily: "SourceHanSansCN-Medium";
             font-weight: 500;
            }
           &-pric{
             float: right;
            }
         }
        &-mesname{
           padding-top: rpx(16);
           font-size: rpx(28);
           color: #333333;
           &-day{
             font-size: rpx(26);
             color: #666666;
            }
           &-info{
                font-size: rpx(28);
                padding: rpx(20) 0;
            }
         }
    }
    /*底部打开poi详情得数据*/
    .poi-details{
        width: 100%;
        height: rpx(1100);
        max-height: rpx(1100);
        background: #fff;
        border-radius: rpx(50)  rpx(50)  0  0;
        &-hea{
           font-size: rpx(32);
           /*font-weight: bold;*/
           padding: rpx(40);
           &-poiname{
               display: inline-block;
            }
           &-close{
              float: right;
            }
         }
        &-content{
            max-height:rpx(1000);
            overflow-y:auto;
           &-imgs{
                height: rpx(350);
            }
            &-des{
                margin: 0 rpx(15);
                padding: rpx(20) 0;
                border-bottom: 1px solid #CCCCCC;
                color: #666;
                font-size: rpx(26);
                p{
                    font-size: rpx(26);
                    line-height: rpx(50);
                }
                &-open_time{
                     margin-right: rpx(10);
                     margin-left: rpx(6);
                     width: rpx(28);
                     height: rpx(28);
                 }
                &-address{
                     margin-right: rpx(10);
                     width: rpx(38);
                     height: rpx(38);
                 }
                &-ticket{
                     margin-right: rpx(10);
                     margin-left: rpx(3);
                     width: rpx(33);
                     height: rpx(33);
                 }
             }
             &-brief{
                padding: rpx(20) rpx(25);
                color: #333333;
                font-size: rpx(28);
                line-height: 170%;
                /*height: rpx(200);*/
                /*overflow: hidden;*/
              }
         }
    }
    .mint-popup{
        width: 100%;
        border-radius: rpx(50)  rpx(50)  0  0;
    }
    .page .mint-swipe-items-wrap{
        height: rpx(350);
    }
    img {
        width: 100%;
        height: 100%;
    }
    .mint-swipe {
        /*height: 400px;*/
    }
    .desc {
        font-weight: 600;
        opacity: .9;
        padding: 5px;
        height: 20px;
        line-height: 20px;
        width: 100%;
        /*color: #333333;*/
        /*background-color: gray;*/
        position: absolute;
        bottom: 0;
    }
    .my-map-list{
        padding: rpx(0) rpx(0) rpx(40) rpx(0);
    }
    .allmap{
        height: rpx(395)
    }
    .allmapday{
        height: rpx(395)
    }
</style>
